{extend name='index/index'/}
{block name="main"}
<style>
    .checkbox{
        margin-bottom: -5px;
        margin-top: 0;
    }
</style>
<div class="content">
    <div class="container">

        <!-- Page-Title -->
        <div class="row">
            <div class="col-sm-12">
                <h4 class="pull-left page-title">{$title}</h4>
                <ol class="breadcrumb pull-right">
                    <li>{$title}</li>
                    <li class="active">{$name}</li>
                </ol>
            </div>
        </div>

        <div class="col-lg-2">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">部门列表</h4>
                </div>
                <div class="panel-body">
                    <div class="inbox-widget nicescroll mx-box" tabindex="5000" style="overflow: hidden; outline: none;">

                        <div id="menuTree"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-10">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">会员列表</h4>
                </div>
                <div class="panel-body">
                    <div class="inbox-widget nicescroll mx-box" tabindex="5000" style="overflow: hidden; outline: none;">

                        <a class="btn btn-success btn-icon btn-sm" href="{:url('user/add')}" rel="add" >
                            <i class="md  md-add"></i>
                            <span>添加会员</span>
                        </a>

                        <a class="btn btn-danger btn-icon btn-sm" href="{:url('menu/add',array('id'=>0))}" rel="add" >
                            <i class="md md-remove"></i>
                            <span>删除</span>
                        </a>
                        <div class="columns pull-right">
                            <button class="btn btn-success btn-sm" onclick="reLoad()">查询</button>
                        </div>
                        <div class="columns pull-right col-md-2 nopadding">
                            <input id="searchname" type="text" class="form-control"
                                   placeholder="姓名">
                        </div>

                        <table class="table  table-striped" id="menuTable">

                        </table>
                    </div>
                </div>
            </div>
        </div>



        </div>
    </div>
<script src="__JS__/jsTree/jstree.min.js"></script>
<link href="__JS__/jsTree/style.min.css" rel="stylesheet" type="text/css">
<script src="__JS__/bootstrap-table/bootstrap-table.min.js"></script>
<script src="__JS__/bootstrap-table/bootstrap-table-mobile.min.js"></script>
<script src="__JS__/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script>
var detpId='';
load(detpId);
    function load(deptId) {
        $('#menuTable')
                .bootstrapTable(
                        {
                            method: "get",  //使用get请求到服务器获取数据
                            url: "{:url('user/index')}", //获取数据的地址
                            striped: true,  //表格显示条纹
                            pagination: true, //启动分页
                            pageSize: 10,  //每页显示的记录数
                            pageNumber:1, //当前第几页
                            pageList: [5, 10, 15, 20, 25],  //记录数可选列表
                            sidePagination: "server", //表示服务端请求
                            paginationFirstText: "首页",
                            paginationPreText: "上一页",
                            paginationNextText: "下一页",
                            paginationLastText: "尾页",
                            queryParamsType : "undefined",


//                            method : 'get', // 服务器数据的请求方式 get or post
//                            url : "{:url('user/index')}", // 服务器数据的加载地址
//                            iconSize : 'outline',
//                            toolbar : '#exampleToolbar',
//                            striped : true, // 设置为true会有隔行变色效果
//                            dataType : "json", // 服务器返回的数据类型
//                            pagination : true, // 设置为true会在底部显示分页条
//                            singleSelect : false, // 设置为true将禁止多选
//                            pageSize : 10, // 如果设置了分页，每页数据条数
//                            pageNumber : 1, // 如果设置了分布，首页页码
//                            showColumns : false, // 是否显示内容下拉框（选择显示的列）
//                            sidePagination : "server", // 设置在哪里进行分页，可选值为"client" 或者

                            queryParams : function queryParamsType(params) {



                                var param = {
                                    pageNumber: params.pageNumber,
                                    pageSize: params.pageSize,
                                    searchText:$('#searchname').val()
                                };
                                return param;


                            },
                            columns : [
                                {
                                    checkbox : true
                                },
                                {
                                    field : 'uid', // 列字段名
                                    title : '序号' // 列标题
                                },
                                {
                                    field : 'nickname',
                                    title : '姓名'
                                },
                                {
                                    field : 'username',
                                    title : '用户名'
                                },
                                {
                                    field : 'login_num',
                                    title : '登录次数'
                                },
                                {
                                    field : 'login_ip',
                                    title : 'IP'
                                },
                                {
                                    field : 'role_name',
                                    title : '所属角色'
                                },
                                {
                                    field : 'creattime',
                                    title : '创建时间'
                                },
                                {
                                    field : 'status',
                                    title : '状态',
                                    align : 'center',
                                    formatter : function(value, row, index) {
                                        if (value == '0') {
                                            return '<span class="label label-danger">禁用</span>';
                                        } else if (value == '1') {
                                            return '<span class="label label-primary">正常</span>';
                                        }
                                    }
                                },
                                {
                                    title : '操作',
                                    field : 'id',
                                    align : 'center',
                                    formatter : function(value, row, index) {
                                        var e = '<a  class="btn btn-primary btn-sm " href="#" mce_href="#" title="编辑" onclick="edit(\''
                                                + row.userId
                                                + '\')"><i class="fa fa-edit "></i></a> ';
                                        var d = '<a class="btn btn-warning btn-sm " href="#" title="删除"  mce_href="#" onclick="remove(\''
                                                + row.userId
                                                + '\')"><i class="fa fa-remove"></i></a> ';
                                        var f = '<a class="btn btn-success btn-sm " href="#" title="重置密码"  mce_href="#" onclick="resetPwd(\''
                                                + row.userId
                                                + '\')"><i class="fa fa-key"></i></a> ';
                                        return e + d + f;
                                    }
                                } ],
                            onLoadSuccess: function(res){  //加载成功时执行
                                console.log(res);

                                layer.msg("加载成功", {time : 1000});
                            },
                            onLoadError: function(){  //加载失败时执行
                                layer.msg("加载数据失败");
                            }

                        });
    }
    function reLoad() {
        $('#menuTable').bootstrapTable('refresh');
    }














    getMenuTreeData();
    function getMenuTreeData() {
        $.ajax({
            type : "GET",
            url : "{:url('dept/tree')}",
            success : function(menuTree) {
                loadMenuTree(menuTree);
            }
        });
    }

    function loadMenuTree(menuTree) {

        var tree = '['+menuTree+']';
        var treeshow = eval(tree);
        $('#menuTree').jstree({
            'core' : {
                'data' :treeshow
            },
           "plugins" : [ "search" ]
        });
        $('#menuTree').jstree().open_all();
  }
    $('#menuTree').on("changed.jstree", function(e, data) {
        if (data.selected == -1) {
            var opt = {
                query : {
                    deptId : '',
                }
            };
            $('#menuTable').bootstrapTable('refresh', opt);
        } else {
            var opt = {
                query : {
                    deptId : data.selected[0],
                }
            };
            $('#menuTable').bootstrapTable('refresh',opt);
        }

    });
</script>
{/block}